body{
    font-size: x-large;
    font-family: Verdana,sans-serif;
    margin: 0 auto;
    color: #333;
    text-align: center;

}

/*ナビゲーション*/



.menu ul {
    margin:0;
    padding:10px;
    list-style: none;
    background: gray;
    color: #fff;
    text-decoration: none;
    
   
}

.menu li a {
    display: block;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding:10px;
    text-decoration: none;
    justify-content: center;
    
}

.menu ul:after {
    content: "";
    display: block;
    clear: both;
}

.menu li {
    display: inline-block;
    width: auto;
    justify-content: center;
}

.menu :hover{
    opacity: 0.8;
}


/*メイン*/
h1{
	font-size: 48px;
    margin: 0;
}

h2{
	font-size: 40px;
    margin: 0;
    color: #fff;
}

.title{
    background-color: yellow;
    padding-top: 64px;
    padding-bottom: 64px;
}

.app1{
    background-color: orange;
    padding-top: 64px;
    padding-bottom: 64px;
}

.app2{
    background-color: skyblue;
    padding-top: 64px;
    padding-bottom: 64px;
}

.app3{
    background-color:lightgreen;
    padding-top: 64px;
    padding-bottom: 64px;
}


.btn1{
    text-decoration: none;
    background: #fff;
    color:orange;
    display: block;
    width: 140px;
    line-height: 40px;
    margin:40px auto 48px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
}

.btn1:hover{
    opacity:0.9;
}

.btn2{
    text-decoration: none;
    background: #fff;
    color: skyblue;
    display: block;
    width: 140px;
    line-height: 40px;
    margin:40px auto 48px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 4px; 
    padding-left: 8px;
    padding-right: 8px;  
}

.btn2:hover{
    opacity:0.9;
}

.btn3{
    text-decoration: none;
    background: #fff;
    color: lightgreen;
    display: block;
    width: 140px;
    line-height: 40px;
    margin:40px auto 48px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 4px; 
    padding-left: 8px;
    padding-right: 8px;  
}

.btn3:hover{
    opacity:0.9;
}

footer{
    font-size:14px;
    padding: 64px 0;
    background: gray;
    color: #fff;
    text-align: center;

}

.resizeimage img{
	width:30%;
}

@media (max-width: 420px){
	
	.container{
		width: 320px;
	}

	#result{	
		position:absolute;
		width:320px;
		background: #fff;
		padding: 10px;
	}

	.menu ul {
		margin:0;
		padding:0px;
	}
	
	.menu li a {
		font-size: 12px;
	}
    .resizeimage img{
        width:100%;
    }
}


@media (max-width: 320px){

	h1{
		font-size:36px;
	}
    
    h2{
		font-size:30px;
	}

	.container{
		width: 260px;
	}

	#result{	
		position:absolute;
		width:260px;
		background: #fff;
		padding: 10px;
	}

	.menu ul {
		margin:0;
		padding:0px;
		
	}
	
	.menu li a {
		font-size: 12px;
	}
    .resizeimage img{
        width:100%;
    }
}

@media (max-width: 280px){

	.container{
		width: 220px;
	}

	#result{	
		position:absolute;
		width:220px;
		background: #fff;
		padding: 10px;
	}

	.menu ul {
		margin:0;
		padding:0px;
		
	}
	
	.menu li a {
		font-size: 8px;
	}
    .resizeimage img{
        width:100%;
    }
}